<template>
<form class="container" @submit="sureBackItem">


    <view class="cartContainer"> 
      <view class="cartShopName">
        <text>订单号：{{Data.belongOrderNo}}</text>
        <!-- <text class='color'>{{list.easyStatusStr}}</text> --> 
      </view>
      <view class="cartItems">
        <view class="itemCheckbox">
          <image mode="aspectFill" :src="Data.itemIcon"></image>
        </view>
        <view class="item_infomation">
          <view class="item_infomation_name">{{Data.itemName}}</view>
          
          <view class="item_infomation_money">
            <text>单价:￥ {{Data.itemPrice}} </text>
            <!-- <text >预计退款金额:￥ {{Data.evaluateBackAmount}} </text> -->
            <!-- <text style='color:red;'>注:优惠券一并退还 </text> -->
          </view>
        </view>
      </view>
    </view>

    <view class="backTextContainer">
      <view>选择问题类型</view>
        <radio-group class="backTags_container" name="tags">
          <label class="font_08" v-for="(tag, i) in tags" :key="i" :data-index="i" @click.stop="radioChange">
            <view :class="(chooseTag == i? 'activeTag':'')">{{tag.tagName }}</view>
            <radio :checked="chooseTag == i" :value="tag.tagName" hidden="true"></radio>
          </label>
        </radio-group>
    </view>

      <view class="backTextContainer">
        <view>退货数量<text style="color:red; margin-left:10rpx; display:inline-block;vertical-align:middle;">*</text></view>
        <view>          
          <input type="number" style="padding:0.2em 0.4em;border-radius:0.6em;color:#000;border:1px solid #ddd; display:inline-block; margin-top:0.4em; " :placeholder="'最多可退' + maxTuiHuoNum + '件'" :data-maxBackCount="'最大退货数量：' + maxTuiHuoNum" name="backcount"></input>
        </view>
      </view>
    
      <view class="backTextContainer">
      <view class="marginbottom">添加图片</view>
      <view class="commitProduct_item_info_commit_images"> 
          <view v-for="(image, index) in upLoadImageList" :key="index" class="imageContainers" :style="'width:' + ((sysWidth/4) - 30 ) + 'px;height:' + ((sysWidth/4) - 30) + 'px'">
            <view class="deleImageView" :data-url="image" :data-urls="upLoadImageList"  :data-index="index" @click.stop="deleSelectImage"><icon color="red" size="16" type="clear"></icon></view>
            <image mode="scaleToFill" :src="image" :data-url="image" :data-urls="upLoadImageList" @tap="lookBigImage"></image>
          </view>

          <view v-if="upLoadImageList.length < 8" class="crameContainer" :data-productId="good.itemId" @tap="addCommitImage" :style="'width:' + ((sysWidth/4) - 30 ) + 'px;height:' + ((sysWidth/4) - 30) + 'px'">
            <image class="crame" src="https://image1.sansancloud.com/xianhua/2020_3/7/20/27/36_676.jpg?x-oss-process=style/preview_120" mode="widthFix"></image>
          </view>

      </view>
    </view>     

    <view class="backTextContainer">
      <view>退款原因</view>
      <textarea value name="backReason" maxlength="150"></textarea>
      <button form-type="submit" :style="'background:' + setting.platformSetting.defaultColor">申请退款</button>
    </view>  

    


</form>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      Data: null,
      sentTagId: '',
      maxTuiHuoNum: 0,
      //最大退货数量
      sysWidth: 320,
      tags: [],
      chooseTag: 0,
      ImageList: [],
      upLoadImageList: []
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getItem(options.orderItemId);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let setting = getApp().globalData.setting;
    console.log(setting.platformSetting.tagsMap);
    let tags;
    let sentTagId;

    if (setting.platformSetting && setting.platformSetting.tagsMap && setting.platformSetting.tagsMap['售后']) {
      tags = setting.platformSetting.tagsMap['售后'];
      sentTagId = tags[0].id;
    } else {
      tags = [];
      sentTagId = 0;
    }

    console.log(tags);
    this.setData({
      setting: getApp().globalData.setting,
      sysWidth: getApp().globalData.sysWidth,
      tags: tags,
      sentTagId: sentTagId
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    radioChange: function (e) {
      let index = e.currentTarget.dataset.index;
      this.setData({
        chooseTag: index
      });
    },
    chooseTagFun: function (e) {
      console.log(e.detail.value);
      this.setData({
        sentTagId: e.detail.value
      });
    },
    lookBigImage: function (e) {
      let url = e.currentTarget.dataset.url;
      let urls = e.currentTarget.dataset.urls;
      getApp().globalData.lookBigImage(url, urls);
    },
    deleSelectImage: function (e) {
      let index = e.currentTarget.dataset.index;
      let upLoadImageList = this.upLoadImageList; //upLoadImageList = upLoadImageList[index]

      upLoadImageList.splice(index, 1);
      this.setData({
        upLoadImageList: upLoadImageList
      });
    },

    /* 添加商品评论图片 */
    addCommitImage: function (e) {
      var that = this;
      let upLoadImageList = that.upLoadImageList;

      if (upLoadImageList.length > 7) {
        return;
      }

      wx.chooseImage({
        count: 8,
        // 默认9
        sizeType: ['compressed'],
        // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'],
        // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          let tempFilePaths = res.tempFilePaths;
          that.uploadImage(tempFilePaths, tempFilePaths.length); //that.addCommitImageToData( tempFilePaths)
        }
      });
    },
    uploadImage: function (tempFilePaths, count) {
      if (!getApp().globalData.loginUser) {
        getApp().globalData.echoErr('用户未登录');
        return;
      }

      console.log(count);
      let that = this;
      let param = {
        userId: getApp().globalData.loginUser.id
      };
      var customIndex = getApp().globalData.AddClientUrl("/file_uploading.html", param, 'POST');
      wx.uploadFile({
        url: customIndex.url,
        //仅为示例，非真实的接口地址
        header: {
          'content-type': 'multipart/form-data'
        },
        filePath: tempFilePaths[count - 1],
        name: 'file',
        formData: customIndex.params,
        success: function (res) {
          let upLoadImageList = that.upLoadImageList;
          var data = res.data;
          console.log(data);

          if (typeof data == 'string') {
            data = JSON.parse(data);
            console.log(data);

            if (data.errcode == 0) {
              upLoadImageList.push(data.relateObj.imageUrl);
              that.setData({
                upLoadImageList: upLoadImageList
              });
            }
          } else if (typeof data == 'object') {
            if (data.errcode == 0) {
              upLoadImageList.push(data.relateObj.imageUrl);
              that.setData({
                upLoadImageList: upLoadImageList
              });
            }
          } //do something

        },
        fail: function (e) {
          console.log(e);
        },
        complete: function (e) {
          if (count == 1 || count < 1) {
            return false;
          } else {
            that.uploadImage(tempFilePaths, --count);
          }
        }
      });
    },
    dellImageToSureBack: function (imageList) {
      let resultStr = '';

      for (let i = 0; i < imageList.length; i++) {
        resultStr += '<img src="' + imageList[i] + '"/>';
      }

      return resultStr;
    },
    //验证为数字和正整数
    verifyGtInteger: function (data) {
      var nubmer = data;
      console.log(data);

      if (isNaN(nubmer) || nubmer <= 0 || !/^\d+$/.test(nubmer)) {
        data = "";
        return false;
      } else {
        return true;
      }
    },
    // 上传
    sureBackItem: function (e) {
      // var that=this;
      console.log(e.detail.value);
      let formData = e.detail.value;

      if (!formData.backcount) {
        wx.showToast({
          title: "请填写退货数量！",
          image: '/images/icons/tip.png',
          duration: 2000
        });
        return;
      }

      let Data = this.Data;

      if (!Data.backCount) {
        Data.backCount = 0;
      }

      console.log("itemCount共买了", Data.itemCount);
      console.log("backCount已经退货", Data.backCount);
      console.log("将要退货", formData.backcount);
      let param = {};
      param.orderItemId = Data.id, param.backReason = formData.backReason; //表单数据

      if (this.verifyGtInteger(formData.backcount) == true) {
        param.backcount = formData.backcount;

        if (formData.backcount <= this.maxTuiHuoNum) {// return true
        } else {
          wx.showToast({
            title: "超过最多退货数!!",
            image: '/images/icons/tip.png',
            duration: 2000
          });
          return false;
        }
      } else {
        wx.showToast({
          title: "退货数为正整数!!",
          image: '/images/icons/tip.png',
          duration: 2000
        });
        return false;
      }

      if (!formData.backReason) {
        wx.showToast({
          title: "请填写退款原因",
          image: '/images/icons/tip.png',
          duration: 2000
        });
        return;
      }

      param.backcount = parseInt(formData.backcount);
      param.tags = formData.tags;
      console.log("param", param);

      if (this.upLoadImageList.length) {
        param.backImages = this.dellImageToSureBack(this.upLoadImageList);
      }

      console.log("param", param);
      var that = this;
      wx.showModal({
        title: '提示',
        content: '确认退款',
        success: function (res) {
          if (res.confirm) {
            var customIndex = getApp().globalData.AddClientUrl("/send_back_order_item_req.html", param, 'POST');
            wx.request({
              url: customIndex.url,
              data: customIndex.params,
              header: getApp().globalData.headerPost,
              method: 'POST',
              success: function (res) {
                console.log(res.data);

                if (res.data.errcode == '0') {
                  wx.showToast({
                    title: '申请退款成功',
                    icon: 'success',
                    duration: 2000
                  });
                  setTimeout(function () {
                    wx.navigateBack();
                  }, 2000);
                } else {
                  wx.showToast({
                    title: res.data.errMsg,
                    image: '/images/icons/tip.png',
                    duration: 2000
                  });
                }
              },
              fail: function (res) {}
            });
          } else if (res.cancel) {}
        }
      });
    },
    getItem: function (orderItemId) {
      var that = this;
      let param = {};
      param.orderItemId = orderItemId;
      console.log(orderItemId);
      var customIndex = getApp().globalData.AddClientUrl("/get_back_order_item_page.html", param, 'get');
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res);
          param.itemcount = res.data.itemCount;
          param.backcount = res.data.backCount;
          console.error("一共买了：" + res.data.itemCount, "已经退货：" + res.data.backCount);
          var maxTuiHuoNum = res.data.itemCount - res.data.backCount; // if(res.data.errcode)

          that.setData({
            Data: res.data,
            maxTuiHuoNum: res.data.itemCount - res.data.backCount //最大可退货数量

          }); // console.log(res.data)
          // console.log(maxTuiHuoNum)
        },
        fail: function (res) {
          getApp().globalData.loadFail();
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>